// index.vue.hbs
<script setup lang="ts">
import { usetestStore } from '@/stores'
import axios from 'axios'
import { ref, watchEffect } from 'vue'

const useTest = usetestStore()

const scene = ref(0)
function showLogin() {
  useTest.changeVisiable(true)
}
async function thirdLogin() {
  scene.value = 1
  // 需要重定向地址
  const redirect_URL = encodeURIComponent(`${window.location.origin}/wxLogin`)
  console.log(redirect_URL)
  const res = await axios.get(
    `http://syt.atguigu.cn/api/user/weixin/getLoginParam/?wxRedirectUri=${redirect_URL}`,
  )
  console.log(res)
  // 生成微信扫码登录二维码页面
  // @ts-ignore
  new WxLogin({
    self_redirect: true,
    id: 'login_container',
    appid: res.data.data.appid,
    scope: 'snsapi_login', //
    redirect_uri: res.data.data.redirectUri, // 重定向地址，授权成功后去的页面
    state: res.data.data.state, // 保持请求和回调的状态
    style: 'black',
    href: '',
  })
}

watchEffect(() => {
  if (scene.value === 1) {
    useTest.queryState()
  }
})

/**
 * 微信扫码登录流程
 * 1.引入微信提供的JS文件
 * 2.在需要使用微信登录的地方 new WxLogin(),填写参数
 * 3.扫描二维码，用户授权登录，后端返回用户信息，把信息保存在本地
 * 4.轮询本地是否有用户信息，有就关闭登录窗口，没有就继续轮询
 */
</script>

<template>
  <div class="ThirdLogin-page">
    <h1>第三方登录-微信登录</h1>
    <button v-if="useTest.userInfo" @click="showLogin">
      登录
    </button>
    <button v-else>
      退出登录
    </button>
    <div v-if="useTest.visiable" class="login_wx">
      <div
        v-show="scene === 0"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <div>手机号登录</div>
        <input id="" type="text" name="">
        <input id="" type="text" name="">
        <button style="margin: auto 0" @click="thirdLogin">
          微信扫码登录
        </button>
      </div>
      <div id="login_container" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login_wx {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #e74343;
}
</style>
